<template>
    <div class="box">
        <div class="div1">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019MGNW3BtiS91569839576.jpg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019LnKumseuhw1569839569.jpg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/20193KAjU2cB6h1569839562.jpg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/20197Cxc53hktC1569839552.jpg" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="div2">
            <div>
                <ul>
                    <li v-for="(itme,index) in kind_list" :key="index" @click="getBaner(itme.path)">
                        <p><img :src="itme.imgSrc" alt=""></p>
                        <span>{{ itme.label }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="div3">
            <h3>{{ name }}</h3>
            <ul>
                <li v-for="(v,k) in list" @click="edd(v)" :key="k">
                    <p>{{v.title}}</p>
                    <p>{{"共"+v.sales_num+"时"}}</p>
                    <p v-for="(item,key) in v.teachers_list" style="display: flex;width: 100%;height: 30px" :key="key">
                        <img :src="item.teacher_avatar" alt />
                        <span style="margin-top:7px;margin-left:20px;">{{item.teacher_name}}</span>
                    </p>
                    <hr style="color: #f2f2f2" />
                    <p>
                        <span>共有{{v.total_periods}}人报名</span>
                        <span style="float: right;color: #44a426;font-size:4.26667vw;">免费</span>
                    </p>
                </li>
            </ul>
        </div>
        <div class="div3">
            <h3>{{ name2 }}</h3>
            <ul>
                <li v-for="(v,k) in list2" @click="member(v)" :key="k">
                    <p>{{v.title}}</p>
                    <p>{{"共"+v.sales_num+"时"}}</p>
                    <p v-for="(item,key) in v.teachers_list" style="display: flex;width: 100%;height: 30px" :key="key">
                        <img :src="item.teacher_avatar" alt />
                        <span style="margin-top:7px;margin-left:20px;">{{item.teacher_name}}</span>
                    </p>
                    <hr style="color: #f2f2f2" />
                    <p>
                        <span>共有{{v.total_periods}}人报名</span>
                        <span style="float: right;color:#44a426;font-size:4.26667vw;">免费</span>
                    </p>
                </li>
            </ul>
        </div>
        <div class="div4">
            <h3>{{ name3 }}</h3>
            <ul>
                <li v-for="(itme,index) in list3" :key="index" @click="star(itme)">
                    <div><img :src="itme.teacher_avatar" alt=""></div>
                    <div>
                        <p>{{itme.teacher_name}}</p>  
                        <p>{{itme.introduction}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="div4">
            <h3>{{ name4 }}</h3>
            <ul>
                <li v-for="(itme,index) in list4" :key="index" @click="star(itme)">
                    <div><img :src="itme.teacher_avatar" alt=""></div>
                    <div>
                        <p>{{itme.teacher_name}}</p>  
                        <p>{{itme.level_name}}</p>
                    </div>
                </li>
            </ul>
        </div>
        
    </div>
</template>
<script>
import { Swipe, SwipeItem } from 'vant';
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
import { banner,index } from "@/request/api.js"
   export default {
        name:'index',
        components:{
            [Swipe.name]:Swipe,
            [SwipeItem.name]:SwipeItem,
        },
        data() {
            return {
                kind_list: [
                    {
                    label: "特色课",
                    imgSrc: require("@/assets/images/index-kinds-course.png"),
                    path: "/course"
                    },
                    {
                    label: "一对一辅导",
                    imgSrc: require("@/assets/images/index-kinds-one.png"),
                    path: "/Oto"
                    },
                    {
                    label: "学习日历",
                    imgSrc: require("@/assets/images/index-kinds-study.png"),
                    path: "/StudyCalendar"
                    }
                ],
                name:"",
                list:[],

                name2:"",
                list2:[],

                name3:"",
                list3:[],

                name4:"",
                list4:[],
            };
        },
        methods:{
            ...mapMutations(['course1','course2','cut']),
            index(){
                index().then(res => {
                    // console.log(res);
                    res=res.data
                    this.name=res[0].channel_info.name
                    this.list=res[0].list

                    this.name2=res[1].channel_info.name
                    this.list2=res[1].list

                    this.name3=res[2].channel_info.name
                    this.list3=res[2].list

                    this.name4=res[3].channel_info.name
                    this.list4=res[3].list
                });   
            },
            getBaner(str) {
                if(str=="/course"){
                    this.cut("/course")
                }else{
                    this.course1()
                }
                this.$router.push(str);
            },
            edd(v){
                console.log(v)
                this.$router.push({
                    path: "/aa",
                    query: { id: v.id }
                });
                this.course1()
            },
            member(v){
                this.$router.push({
                    path: "/member",
                    query: { id: v.id }
                });
                this.course1()
            },
            star(itme){
                this.$router.push({
                    path: "/star",
                    query: { id: itme.teacher_id }
                });
                this.course1()
                
            }
        },
        mounted (){   
            this.index()
        },
   };
</script>
<style scoped>
*{
    padding: 0;
    margin:0;
}
.box{
    background: #F0F2F5;
}
.div1 img{
    width:100%;
}


.div2 img{
    width:30px;
}
.div2{
    height: 2rem;
}

.div2 div{
    width: 100%;
    position: relative;
    top: -30px;
}
.div2 div>ul{
    display: flex;
    justify-content: center;
    justify-content: space-around;

}
.div2 div>ul>li{
    text-align: center;
    padding: .6rem 0 .6rem 0;
    width: 30%;
    background: #ffffff;
    border-radius: 10px;
}
.div3{
    padding: .2rem;
}
.div3 img{
    width: 10%;
    border-radius: 50%;
}
.div3 p{
    padding:5px 0;
    color: #000;
}
.div3 p:nth-child(1){
    font-size: 20px;
}
.div3>ul>li{
    background: #ffffff;
    margin-top:10px;
    padding: .2rem;
    border-radius: 5px;
}
.div3 li>div:nth-child(1){
    height:70px;
    width: 25%;
}

.div4{
    padding: .2rem;
}
.div4>ul>li{
    background: #ffffff;
    display: flex;
    margin-top:10px;
    border-radius: 5px;
}
.div4 li>div:nth-child(1){
    height:70px;
    width: 20%;
    display:flex;
    justify-content: center;
    align-items: center;  
}
.div4 li>div:nth-child(2){
    flex:1
}
.div4 li>div>img{
    width:70%;
    border-radius: 50%;
}
.div4 p{
    padding: 8px;
}







/* .div3 li>div{
    float: left;
} */
/*  */
</style>